'use strict'
import React, { Component , PropTypes} from 'react';

import {
    View,
	Image,
	TextInput,
	ScrollView,
	StyleSheet,
	Text,
	TouchableOpacity,
	AsyncStorage,
	Navigator,
} from 'react-native';

import {NavBarBackItem, NavBarTitleItem} from './NavbBarItems';
import NavigatorBarView from './NavigatorBarView';
import RegisterView from './RegisterView'
import DCAction from '../actions/DCAction';
import dcalt from '../alt/DCAlt'
import DCStore from '../stores/DCStore'

export default class LoginView extends Component {
	constructor(){
		super();

		this.state = {
			inputUsername: undefined,
			inputPassword: undefined,
			userData: undefined,
		}
	};

	updateUsername=(text)=> {
		this.state.inputUsername = text
		this.setState({inputUsername: text})
		this.updateUserData();
		this.setObject('inputUsername', this.state.inputUsername)
	};
	updatePassword=(text)=> {
		this.state.inputPassword = text
		this.setState({inputPassword: text})
		this.updateUserData();
	};
	updateUserData=()=> {
		var userData = Immutable.fromJS({username: this.state.inputUsername,
										 password: this.state.inputPassword})
		this.setState({userData: userData})
		this.setObject('userData', this.state.userData)
		
	};
	loginAction=()=> {
		if (this.state.inputUsername == undefined || this.state.inputUsername.length == 0) {
			ALT.actions.DCAction.showText(localizedStrings.please_input_phone,1)
		}else if (this.state.inputPassword == undefined || this.state.inputPassword.length == 0) {
			ALT.actions.DCAction.showText(localizedStrings.login_password_p,1)
		}else{
			this.updateUserData()
			
		   ALT.actions.DCAction.login(this.state.userData)
		}
	};
	//本地保存数据
	setObject=(key,object)=>{
    	AsyncStorage.setItem(key, JSON.stringify(object), () => {});
	};
	//获取本地数据
	getObject=(key,callback)=>{
    	AsyncStorage.getItem(key, (error, object) => {
        	if (error) {
            	console.log('Error:' + error.message);
            	callback();
        	} else {
            	callback(JSON.parse(object));
        	}
    	})
    };
    componentDidMount() {
    	this.getObject('userData',(object)=> {
    		
    			this.setState({
                	userData: object
        		});
        		if (this.state.userData) {
    				ALT.actions.DCAction.automaticLogin(this.state.userData)
    			};    		
    		}
        );
        this.getObject('inputUsername',(object)=> {
    		
    			this.setState({
                	inputUsername: object
        		});
        		    		
    		}
        );
        

    }
 	 onPressAction = ()=>{
		nav.push({title:'Register'})
  	};
	render(){

		var userNameContent = [styles.inputContent];
		userNameContent.push({borderWidth:1,borderColor:'#dcdcdc',marginTop:as(8)});

		
		
		return(
			<View style = {{backgroundColor: 'white'}}>
				<NavigatorBarView
						centerItem ={<NavBarTitleItem
						title='登录'/>}/>
				<View style={styles.nameAndPasswordContent}>

					<View style={userNameContent}>
						<Text style={styles.title}>
							用户名
						</Text>
						<TextInput
							style={styles.input}
							autoFocus={true}
							autoCorrect={false}
							returnKeyType={'next'}
							autoCapitalize={'none'}
							placeholder='请输入用户名'
							placeholderTextColor='#939393'
							underlineColorAndroid={'transparent'}  
							onChangeText={(text)=>{this.updateUsername(text)}}
							value={this.state.inputUsername}
							defaultValue={this.state.inputUsername}/>
					</View>

					<View style={styles.inputContent}>
						<Text style={styles.title}>
							密码
						</Text>
						<TextInput
							autoCorrect={false}
							autoCapitalize={'none'}
							returnKeyType={'done'}
							placeholder='请输入密码'
							placeholderTextColor='#939393'
							underlineColorAndroid={'transparent'}  
							secureTextEntry={true}
							style={styles.input}
							onChangeText={(text)=>{this.updatePassword(text)}}
							value={this.state.inputPassword}/>
					</View>

				</View>

				<TouchableOpacity onPress={()=>{this.loginAction()}} style={styles.login}>
					<Text>
						登录
					</Text>
				</TouchableOpacity>

				<RegisterBtn onPressAction = {this.onPressAction}/>

			</View>
		);
	}
		
}



class RegisterBtn extends Component {
  static propTypes = {
    onPressAction: PropTypes.func.isRequired,
  }
 

  render() {
    return (
      	<TouchableOpacity onPress={this.props.onPressAction} style={styles.regist}>				
			<Text>
				前往注册
			</Text>
	  	</TouchableOpacity>
    )
  }
}
var styles = StyleSheet.create({
	login:{
		width:Common.size.width-as(30),
		height:as(37),
		justifyContent:'center',
		alignItems:'center',
		marginTop:as(20),
		borderRadius:as(5),
		marginLeft: as(15),
		backgroundColor: '#00bfff'
	},
	regist:{
		marginLeft: Common.size.width/2-(Common.size.width-as(224))/2,
		width:Common.size.width-as(224),
		height:as(30),
		justifyContent:'center',
		alignItems:'center',
		marginTop:as(49),
		borderRadius:as(5),
		borderWidth:1,
		borderColor: '#00bfff',
	},
	findPassword:{
		alignSelf:'flex-end',
		marginTop:as(16),
		marginRight:as(15),
	},
	findPasswordText:{
		color: '#00bfff',
	},
	nameAndPasswordContent:{
		borderWidth:1,
		borderColor: '#dcdcdc',
	},
	photo:{
		height:as(80),
		width:as(80),
		marginTop:as(20),
		marginBottom:as(20),
		borderRadius:as(40),
	},
	inputContent:{
		flexDirection:'row',
		width:Common.size.width,
		paddingLeft:as(12),
		paddingRight:as(10),
		backgroundColor:'white',
		alignItems:'center',
		height:as(37),
		justifyContent:'center'
	},
	title:{
		color:'#4F4F4F',
		fontSize:asFont(15),
		width:as(73),
	},
	input:{
		borderRadius:as(5),
		fontSize:asFont(15),
		height:as(37),
		marginLeft:as(5),
		flex:1
	},
	inputImage:{
		height:as(24),
		width:as(24),
		borderRadius:as(12),
		marginRight:as(5),
	},
	scroll: {
		width: Common.size.width,
		height:Common.size.height,
		backgroundColor: '#F2F2F2',
		alignItems:'center'
	},
});


// module.exports = LoginView